<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>短信发送</title>
<style type="text/css">
html,body{
	font-size:calc(100vw/7.5);
	margin:0;
	padding: 0;
	background: #fff;
}
.body{ width: 5.9rem; margin:.9rem auto 0; }
.body .title{font-size: .5rem;color: #222; font-weight: bold; line-height: .5rem;width: 5.9rem; height: .5rem; margin-bottom: 1.11rem;}
.body .text{ width: 5.9rem;height: .47rem; line-height: .26rem; outline: none; color: #bebebe; padding-bottom: 0.25rem; display: block; font-size: .26rem;border:0;  border-bottom: #bebebe .01rem solid; margin-bottom: .6rem; }
.body .dw{ width: 5.9rem; height: 0; position: relative; }
.body .button{ position: absolute; right:0; top: -1.4rem; color: #fd686d; font-size: .26rem; width:1rem; height: .4rem; margin-top: 0.1rem; border-left: #fd686d 1px solid; text-align:right;  }
.body .submit{ width: 5.9rem; height: .8rem; line-height: .8rem; text-align: center; color: #fff; font-size: .32rem; border-radius:.03rem; background: #f3676a; margin-top: .56rem; }
.body .back{  width: 5.9rem; height: .8rem; line-height: .8rem; text-align: center; color: #fff; font-size: .32rem; border-radius:.03rem; background: #f8abad; margin-top: .29rem; }
</style>
<script type="text/javascript" src="/js/jquery.1.8.3.js"></script>
</head>
<body>
<div class="body">
	<div class="title">用户填写信息</div>
	<input type="text" id="phone" class="text" placeholder="请输入手机号"  />
	<input type="text" id="auth" class="text" placeholder="请输入验证码"  />
	<div class="dw">
		<div class="button" id="btn" str="0">验证码</div>
	</div>
	<div class="submit" id="submit">提交</div>
	<div class="back">返回</div>
</div>	
</body>
<script type="text/javascript">
var dtime = 60;
$('#btn').click(function(){
	var mobile = $("#phone").val();
	var str=$('#btn').attr("str");
	if(str=="0"){
		$('#btn').attr("str","1");
		timeout();
		$.post('/main/mobile',{'mobile':mobile},function(data){
			var data = JSON.parse(data);   
            if(data.SubmitResult.code == "2"){
                alert(data.SubmitResult.msg);
            }else{
                alert('短信发送失败');
            }
		});
	}else{
		alert("您已经点击过了！");
	}
})
$('#submit').click(function(){
	var phone = $("#phone").val();
    var auth = $("#auth").val();
    if(phone==""){
		alert("请填写手机号！")
	}
	else if(auth==""){
		alert("请填写验证码！")
	}else{
		$.post('/main/index',{'phone':phone,'auth':auth},function(data){
			if(data=="1"){
				alert("提交成功");
			}else{
				alert("提交失败");
			}
		});         
	}
});

function timeout(){
		dtime=dtime-1;
		if(dtime<0){
			btn.innerHTML="验证码";
			btn.setAttribute("str","0");
			dtime = 60;
		}else{
			btn.innerHTML=dtime+"秒";
			setTimeout(timeout,1000);
		}
}
</script>
</html>